/*timeline*/
.m-timeline {
	margin-left: 10px;
	border-left: rgba(227,227,227,1.00) 1px solid;
	box-sizing: border-box;
	li { 
		display: block;
		clear: both;
		position: relative;
		border-left: #eee 1px solid;
		margin-left: -1px;
		padding: 0 0 8px 20px!important;
		overflow: visible !important;
		.icon {
			position: absolute;
			left: -10px;
			top: 5px;
			font-size: 19px;
			color: #DBDBDB;
			display: block;
			width: 19px;
			height: 19px;
			line-height: 19px;
			background-color: #fff;
			border-radius: 50%;
			z-index: 120;
			&:after {
				position: absolute;
				top: 2px;
				left: 15px;
				font-size: 0px;
				width: 1px;
				height: 1px;
				border: 7px solid rgba(255,255,255,0);
				border-right-color: #f3f5f6;
				content: ".";
				border-radius: 0;
				z-index: 2;
			}
		}
		.content {
			border-radius: 5px;
			background: #f3f5f6;
			padding: 5px;
			margin: 0;
			color: #5d5a5a;
			transition: margin-left 0.3s;
            -moz-transition: margin-left 0.3s;	/* Firefox 4 */
            -webkit-transition: margin-left 0.3s;	/* Safari 和 Chrome */
            -o-transition: margin-left 0.3s;	/* Opera */
			ul{
				margin-left: 12px;
				li{
					padding: 3px 0 3px 0!important;
					border: none!important;
					margin: 0!important;
				}
			}
		}
		//当前项
		&.activate, &.active{
			border-color: rgba(43,180,208,1.00);
			.content {
				background: #23B7FF;
				color: rgba(255,255,255,1.00);
			}
			.icon {
				color: #23B7FF;
				left: -13px;
				font-size: 26px;
				width: 26px;
				height: 26px;
				line-height: 26px;
				&:after {
					left: 18px;
					border-right-color: #23B7FF;
				}
			}
		}
		//过去式
		&.finished {
			border-color: #64B94F;
			.icon {
				color: #64B94F;
			}
			.content {
				color: #888
			}
		}
		&:last-child{
			border-left: #fff 1px solid;
		}
		&.clickstyle{
			.content:hover{
				cursor: pointer;
				margin-left: -5px;
			}
		}
	}
	&.inline{
		display: table;
		text-align: center;
		margin: 0;
		padding: 0;
		margin-top: 45px;
		border-left: none;
		width: 100%;
		li {
			display: table-cell;
			clear: inherit;
			border-left: none;
			margin-left: none;
			padding: 0!important;
			border-top: #eee 2px solid;
			.content {
				background: none
			}
			.icon {
				top: -31px;
				left: 50%;
				margin-left: -9px;
				&:after {
					position: absolute;
					top: 15px;
					left: 50%;
					margin-left: -8px;
					font-size: 0px;
					width: 1px;
					height: 1px;
					border: 7px solid rgba(255,255,255,0);
					border-bottom-color: #eee;
					content: ".";
					border-radius: 0;
					z-index: 2;
				}
			}
			&.activate, &.active{
				border-color: #FF5700;
				.icon {
					top: -35px;
					left: 50%;
					margin-left: -13px;
					color: #FF5700;
					&:after {
						margin-left: -7px;
						border-bottom-color: #FF5700;
						top: 19px;
					}
				}
				.content {
					color: #FF5700
				}
			}
			&.finished{
				border-color: #64B94F;
				.icon:after {
					border-bottom-color: #64B94F;
				}
			}
		}
	}
}